<template>
  <!-- 该组件为报表中心(盈亏报表)(个人报表)的订单详情弹窗 -->
  <!-- 外包裹 -->
  <bc-modal>
    <div class="wrap">
      <!-- 顶部title -->
      <div class="top clearfix">
        <span class="top-left">
          <i class="iconfont iconcp_fanli"></i>
        </span>
        <span class="top-content">订单详情</span>
        <span class="top-right" style="color: #e02828;" @click="handleClose">
          <i class="iconfont iconty_guanbi" style="fontSize: 22px"></i>
        </span>
      </div>
      <!-- 主体内容 -->
      <div class="bottom">
          <!-- 重庆时时彩 -->
          <div class="bottom-top border-bottom clearfix">
            <div class="bottom-top-left clearfix">
              <span class="icon-wrapper">
                <lottery-icon :name="detail.lotteryName"></lottery-icon>
              </span>
              <div class="bottom-top-left-text">
                <p class="cqssc">{{detail.lotteryName}}</p>
                <p class="number">第{{detail.dateNo}}期</p>
              </div>
            </div>
            <div class="bottom-top-right">
              <p>
                <span class="item">购买</span>
                <span class="num">-{{ detail.amount }}</span>
              </p>
              <p>
                <span class="item">中奖</span>
                <span class="red" v-if="detail.lotteryState == 1">+{{detail.bonus}}</span>
                <span class="normal" style="fontSize: 24px" v-if="detail.lotteryState == 2">0</span>
                <span v-if="detail.lotteryState == 0">--</span>
              </p>
              <p>
                <span class="item">盈亏</span>
                <span v-if="detail.lotteryState == 0" class="num-not">--</span>
                <span v-else>
                  <span class="red " v-if="detail.lotteryState !== 0 && detail.bonus - detail.amount > 0">+{{detail.bonus - detail.amount}}</span>
                  <span class="green" v-if="detail.lotteryState !== 0 && detail.bonus - detail.amount < 0">{{detail.bonus - detail.amount}}</span>
                  <span class="normal" v-if="detail.lotteryState !== 0 && detail.bonus - detail.amount == 0">-{{detail.bonus - detail.amount}}</span>
                </span>
              </p>
            </div>
          </div>
          <!-- 开奖信息 -->
          <div class="bottom-bottom clearfix">
            <p class="kaijiang">开奖信息</p>
            <ul class="list">
              <li class="lis-item">
                  <div v-if="detail.lotteryState == 0"><span class="title">开奖号码:</span><span>待开奖</span></div>
                  <div v-else class="draw-numbers"><span class="title">开奖号码:</span>
                    <component :is="currentComponent" :numStr="detail.winningNumbers">
                    </component>
                  </div>
              </li>
              <li class="lis-item">
                <div v-if="detail.lotteryState == 0" class="draw-numbers"><span class="title">开奖时间: </span><span><count-down :timeStamp="detail.drawTime"></count-down></span></div>
                <div v-else class="draw-numbers"><span class="title">开奖时间: </span><span>{{ detail.drawTime | formater }}</span></div>
                
              </li>
            </ul>
            <div class="orderDetail">
              <p>订单方案</p>
              <ul class="list">
                
                <li class="lis-item" v-show="detail.accountName"><span class="title">用户名:</span><span>{{ detail.accountName }}</span></li>
                <li class="lis-item"><span class="title">订单号码:</span><span>{{ detail.orderId }}</span></li>
                <li class="lis-item"><span class="title">开奖号码:</span><span>{{ detail.numbers }}</span></li>
                <li class="lis-item"><span class="title">开奖时间:</span><span>{{ detail.drawTime | formater }}</span></li>
                <li class="lis-item"><span class="title">彩种玩法:</span><span>{{ detail.lotteryType}}</span></li>
                <li class="lis-item"><span class="title">单注金额:</span><span>{{ detail.amount / detail.quantity}}</span></li>
                <li class="lis-item"><span class="title">最高奖金:</span><span>{{ detail.bonus}}</span></li>
              </ul>
              <!-- 按钮 -->
              <button @click="deleOrder(index)" v-if="detail.lotteryState == 0">撤单</button>
            </div>
            <!-- 开奖图片 -->
            <span class="lottery-state-wrapper">
              <lottery-state :state="detail.lotteryState"></lottery-state>
            </span>
          </div>
      </div>
    </div>
  </bc-modal>
    
</template>

<script>
import BcModal from '@/components/base/bc-modal/bc-modal'
import LotteryIcon from '@/components/base/lottery-icon/lottery-icon'
import LotteryState from '@/components/base/lottery-state/lottery-state'
import WinningNumbersScPhone from '@/components/base/winning-numbers/winning-numbers-sc-phone'
import WinningNumbersSscPhone from '@/components/base/winning-numbers/winning-numbers-ssc-phone'
import CountDown from '@/components/base/count-down/count-down'
export default {
  name: 'orderDetail',
  components: {
    BcModal,
    LotteryIcon,
    LotteryState,
    WinningNumbersScPhone,
    WinningNumbersSscPhone,
    CountDown 
  },
  props: {
    detail: {
      type: Object,
      default: function() {
        return {}
      }
    },
    isGroup: {
      type: Boolean,
      default: false
    }

    //title相关参数
    //玩法名字
    // title: {
    //   type: String,
    //   default: '重庆时时彩'
    // },
    // //期数
    // titleNumber: {
    //   type: Number,
    //   default: 1812881
    // },

    // //财产相关参数
    // //购买花费
    // purchase: {
    //   type: Number,
    //   default: -200
    // },
    // //购买小数位
    // afterPurchase: {
    //   type: String,
    //   default: '00'
    // },
    // //中奖收入
    // income: {
    //   type: Number,
    //   default: 1000,
    // },       
    // //中奖收入小数位
    // afterIncome: {
    //   type: String,
    //   default: '00'
    // },
    // //中奖判断  0未中奖 1中奖 -1未开奖
    // zhongjiang: {
    //   type: Number,
    //   default: -1
    // },  
    // //订单相关参数
    // orders: {
    //   type: Array,
    //   default: function(){
    //     return[
    //       {
    //         zjNumber: 'DD817720D4203D84',
    //         kjTime: '18/21/21 10:03:21',
    //         czwanfa: '重庆时时彩-五星直选复式'  
    //       },
    //       {
    //         zjNumber: 'DD817720D4203D84',
    //         kjTime: '18/21/21 10:03:21',
    //         czwanfa: '重庆时时彩-五星直选复式'  
    //       },
    //       {
    //         zjNumber: 'DD817720D4203D84',
    //         kjTime: '18/21/21 10:03:21',
    //         czwanfa: '重庆时时彩-五星直选复式'  
    //       }
    //     ];
    //   }
        
    // }
  },
  methods: {
    deleOrder: function(key,index){
      this.orders.splice(index,1);
    },
    handleClose() {
      this.$emit('click')
    }
  },
  computed: {
    currentComponent() {
      let component = ''
      switch(this.detail.lotteryName) {
        case '北京赛车':
          component = 'WinningNumbersScPhone'
          break;
        case '重庆时时彩':
          component = 'WinningNumbersSscPhone'
          break;
      }
      return component 
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
    width: 4px;
    height: 16px;
    background-color: #F5F5F5;
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
  /* 清除浮动 */
  .clearfix
    overflow auto;
  .wrap
    width 580px;
    position absolute 
    top 50%
    left 50%
    transform translate(-50%, -50%)
    // 弹窗顶部title
    .top
      position relative;
      width 580px;
      height 48px;
      color #fff;
      background-color $color-theme-dark;
      border-top-left-radius 2px;
      border-top-right-radius 2px;
      
      //顶部左侧图标
      .top-left
        position absolute;
        top 15px;
        left 15px;
        
      //订单详情
      .top-content
        position absolute;
        display inline-block;
        top 14px;
        left 260px;
      //红叉
      .top-right
        position absolute;
        top 15px;
        right 15px;
    //底部主体内容
    .bottom
      width 578px;
      height 370px;
      border 1px solid #dbd3d3;
      border-bottom-left-radius 2px;
      border-bottom-right-radius 2px;
      background-color #fff;

      //底部上分栏
      .bottom-top
        position relative
        width 578px;
        height 70px;
        background-color $color-text-button;

        //上分栏左侧重庆时时彩
        .bottom-top-left
          position absolute;
          width 196px;
          height 48px;
          border-right 1px solid #dbd3d3;
          top 11px;

          .icon-wrapper 
            position absolute;
            left 19px;
            width 48px 
            height 48px 
            border-radius 50%
            font-size 48px
          .icon-wrapper >>> .icon  
            font-size 44px 
            width 48px 
            height 48px
          .bottom-top-left-text
            position abslute;
            margin-left 80px;
            font-size 14px;
            top 10px;
            left 30px;
            // border 1px solid red;
            width 112px;
            height 48px;
            // background-color #ccc;

            .cqssc
              font-weight blod;
              height 24px;
              line-height 24px;
            .number
              height 24px;
              line-height 24px;
              color #8c8f98;
        .bottom-top-right
          position absolute;
          width 381px;
          height 48px;
          top 11px;
          right 0;
          // background-color pink;

          p
            display inline-block;
            width 123px;
            height 48px;
            margin-left 0px;
            // background-color deeppink;

            span 
              display block;
              text-align center;
              height 30px;
            
            .item
              font-size 14px
              color $color-sub-grey;
              height 18px; 
            .red 
              color $color-theme-red 
              font-size 24px 
            .green 
              color  $color-primary-green 
              font-size 24px
            .num
              font-size 24px;
              color #3d8506;
              margin-bottom 0;

              a
                font-size 14px;

            .num-yes
              font-size 24px;
              color $color-theme-red;
              a
                font-size 14px;

            .num-no
              font-size 24px;
              color black;
            .yingkui
              color #3d8506;

              a
                font-size 14px;
            
            .num-not
              font-size 24px;

              
      //底部订单方案
      .bottom-bottom
        position relative;
        overflow-y auto;
        width 579px; 
        height 300px;
        background-color $color-text-button;
        // border-top 1px solid #dbd3d3;
        
        .orderDetail
          position relative;
        
          

        p
          margin-left 81px;
          margin-top 30px;
          font-size 14px;
          font-weight bold;
          margin-bottom 28px;

        button 
            position absolute;
            right 20px;
            top 25px;
            height 25px;
            width 50px;
            background-color #c52323;
            text-align center;
            text-shadow 0 1px 1px rgba(0,0,0,.3);
            color #fff;
            border none;
            border-radius 5px;
            cursor pointer;

        button:focus
            outline none;
            border none;
        .list
          list-style none;
          margin-left 81px;
          .lis-item
            line-height 25px;
            font-size 14px;
            color #8c8f98;
            margin-bottom 12px;
            // // height 39px;
            .draw-numbers 
              display flex
              align-items center 
            .title 
              margin-right 15px
              color $color-sub-grey
              min-width 70px
              display inline-block
            .time
              color red;
            span 
              color #000;
        .lottery-state-wrapper 
          width 50px 
          height 50px 
          position absolute;
          right 19px;
          top 9px;
        

</style>
